<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>写笔记 - FNK</title>
        <link rel="stylesheet" href="/static/css/navbar.css">
        <link rel="stylesheet" href="/static/css/page.css">
        <link rel="stylesheet" href="/static/css/md.css">
        <link rel="stylesheet" href="/static/css/katex.min.css">
        <script src="/static/js/marked.min.js"></script>
        <script src="/static/js/katex.min.js"></script>
        <style>
            .edit-form {
                padding-top: 10px;
            }
            .edit-form input {
                display: block;
                width: 100%;
                height: 34px;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
                box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            }
            .edit-form .form-content {
                display: flex;
            }
            .edit-form .form-content textarea, #preview {
                flex: 1;
                width: 50%;
                height: 300px;
                border: 1px solid #ccc;
                padding: 10px;
                box-sizing: border-box;
                border: 1px solid #cccccc;
                border-radius: 4px;
                font-size: 14px;
            }
            .edit-form .form-content #preview {
                border: none;
                background-color: #ffffff;
                overflow-y: auto;
                resize: none;
            }
        </style>
        <script>
            function PreviewUpdate() {
                var content_html = marked(document.getElementById('editor').value)
                document.getElementById('preview').innerHTML = content_html;
                var katex_exp = document.getElementsByClassName("math")
                for(var i=0;i<katex_exp.length;i++) {
                    katex.render(katex_exp.item(i).innerHTML, katex_exp.item(i));
                }
            }
        </script>
    </head>
    <body>
        <nav class="navbar">
            <div class="logo">FNK</div>
            <ul class="nav-links">
                <li><a href="/home">首页</a></li>
                <li><a href="/file">文件</a></li>
                <li><a href="/note">笔记</a></li>
                <li><a href="/resource">资源</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
            <div class="users">
            {% if user %}
                <p>{{ user }}</p>
                <button class="user-btn" onclick="javascript:location.href='/logout'">登出</button>
            {% else %}
                <button class="user-btn" onclick="javascript:location.href='/login'">登录</button>
            {% endif %}
            </div>
        </nav>
        <div class="page-box">
            <div class="page-header">
                <h1 class="title">写笔记</h1>
            </div>
            <form action="/note/add/{{ user }}" method="POST" class="edit-form">
                <input maxlength="200" type="text" name="title" value="{{ title }}" placeholder="标题"><br>
                <div class="form-content">
                    <textarea placeholder="内容..." id="editor" name="content" oninput="PreviewUpdate()">{{ content }}</textarea>
                    <div id="preview" class="markdown-body"></div>
                </div>
                <div style="padding-top: 5px;">
                    <button type="submit" class="btn">提交</button>
                </div>
            </form>
        </div>
        {% if content %}
            <script>
                PreviewUpdate();
            </script>
        {% endif %}
    </body>